<template>
  <div class="enterprise-modal">
    <h4 class="mb-20">产业标记</h4>
    <CheckboxGroup v-model="industryChecked" @on-change="onChangeChecked">
      <Checkbox class="mb-20" :label="it.industryName" v-for="(it, i) in industryAssignsList" :key="i"></Checkbox>
    </CheckboxGroup>
    <Form :label-width="110" label-position="left">
      <FormItem label="经营人员"></FormItem>
      <FormItem :label="item.industryName" v-for="(item,i) in busiIndustryAssignList" :key="i">
        <Row>
          <Col class="mb-10" style="width:500px">
            <Input
              v-model="item.busInfoTrack.busiPersonName"
              search
              enter-button="选择"
              readonly
              placeholder="请选择人员"
              @on-search="onSelectStaff(item.industryId)"
            />
          </Col>
        </Row>
      </FormItem>
    </Form>

    <StaffSelect v-model="modalValue" @setStaff="setStaff" />
  </div>
</template>

<script>
import { getDictTreeByParentId } from '@/api/system.js'
import StaffSelect from './staffSelect.vue'
export default {
  name: 'staffOperate',
  components: { StaffSelect },
  props: {
    busiInfoId: {
      type: String,
      default: ''
    },
    initData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    initData: {
      handler (val) {
        if (val && val.length) {
          setTimeout(() => {
            this.init(val)
          }, 200)
        }
      }
    }
  },
  data () {
    return {
      industryChecked: [],
      // 所有产业标记数据
      industryAssignsList: [],
      // 选中的产业标记列表
      busiIndustryAssignList: [],
      modalValue: false,
      currentIndex: 0
    }
  },
  created () {
    this.getDict()
  },
  methods: {
    async getDict () {
      const res = await getDictTreeByParentId({ parentId: 'COMPANY_SERVICE' })
      this.industryAssignsList = res.map(it => {
        return {
          industryId: it.dictId,
          industryName: it.name,
          busInfoTrack: { busiPersonId: '', busiPersonName: '' },
        }
      })
    },
    async init (arr) {
      this.busiIndustryAssignList = arr
      this.industryChecked = arr.map(it => it.industryName)

      arr.forEach(item => {
        this.industryAssignsList.forEach(it => {
          if (it.industryId === item.industryId) {
            it.busInfoTrack = item.busInfoTrack
            it.busiInfoId = item.busiInfoId
          }
        })
      })

      this.updateIndustryCheckedList()
    },
    onChangeChecked () {
      this.updateIndustryCheckedList()
    },
    updateIndustryCheckedList () {
      this.busiIndustryAssignList = this.industryAssignsList.filter(it => this.industryChecked.includes(it.industryName))
    },
    getData () {
      return this.busiIndustryAssignList.map(item => {
        const { busInfoTrack, industryId, industryName } = item
        return {
          busInfoTrack,
          industryId,
          industryName,
          busiInfoId: this.busiInfoId
        }
      }).filter(it => it.busInfoTrack.busiPersonId)
    },
    reset () {
      this.industryChecked = []
      this.busiIndustryAssignList = []
      this.industryAssignsList = this.industryAssignsList.map(it => {
        return {
          industryId: it.industryId,
          industryName: it.industryName,
          busInfoTrack: { busiPersonId: '', busiPersonName: '' },
        }
      })
    },
    setStaff (row) {
      const { userId, realName } = row

      this.industryAssignsList[this.currentIndex].busInfoTrack.busiPersonId = userId
      this.industryAssignsList[this.currentIndex].busInfoTrack.busiPersonName = realName
      this.updateIndustryCheckedList()
    },
    onSelectStaff (industryId) {
      this.currentIndex = this.industryAssignsList.findIndex(it => it.industryId === industryId)
      this.modalValue = true
    },
  }
}
</script>

<style lang='less' scoped>
.enterprise-modal {
  .mb-20 {
    margin-bottom: 20px;
  }
  .icon {
    line-height: 33px;
  }

  .mb-10 {
    margin-bottom: 10px;
  }

  .input-append {
    background-color: blue;
  }
}
</style>
<style lang='less'>
.enterprise-modal .icon {
  .ivu-icon {
    cursor: pointer;
  }
}
</style>
